<template>
  <div
    class="setting-box p-2.5 protectionSet outreach-box"
    :class="treeStore.isShowStrategyDetail ? 'not-click' : ''"
    v-loading="loading"
    element-loading-background="rgba(0, 0, 0, 0.1)"
  >
    <div class="pl-8 py-2.5 font-bold text-base">禁用控制</div>
    <div class="titleMargin outSet">
      <div class="leftCont">光驱</div>
      <div class="rightC">
        <el-radio-group v-model="data.cdrom">
          <el-radio value="1">允许</el-radio>
          <el-radio value="0">禁用</el-radio>
        </el-radio-group>
      </div>
    </div>
    <div class="titleMargin outSet">
      <div class="leftCont">无线网卡</div>
      <div class="rightC" style="margin-left:38px">
        <el-radio-group v-model="data.wifi">
          <el-radio value="1">允许</el-radio>
          <el-radio value="0">禁用</el-radio>
        </el-radio-group>
      </div>
    </div>
    <div class="titleMargin outSet">
      <div class="leftCont">蓝牙</div>
      <div class="rightC">
        <el-radio-group v-model="data.bluetooth">
          <el-radio value="1">允许</el-radio>
          <el-radio value="0">禁用</el-radio>
        </el-radio-group>
      </div>
    </div>
    <div class="titleMargin outSet">
      <div class="leftCont">串口</div>
      <div class="rightC">
        <el-radio-group v-model="data.com">
          <el-radio value="1">允许</el-radio>
          <el-radio value="0">禁用</el-radio>
        </el-radio-group>
      </div>
    </div>
    <div class="titleMargin outSet">
      <div class="leftCont">并口</div>
      <div class="rightC">
        <el-radio-group v-model="data.lpt">
          <el-radio value="1">允许</el-radio>
          <el-radio value="0">禁用</el-radio>
        </el-radio-group>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, watch, nextTick, computed } from "vue";
import { req_setPeriphreal, req_getPeriphrealConfig } from "~/utils/axios/index.js";
import { ElMessage } from "element-plus";
import { useTreeStore } from "~/utils/pinia/tree.js";
import { _debounce } from "~/utils/common/function.js";
import { eventBus } from "~/utils/common/eventBus.js";
eventBus.on("getStrategyDetail", (detail) => {
  let str = JSON.stringify(detail.data);
  let nstr = str.replace(/\[|\{|\}|\]/g, "");
  data.value = JSON.parse("{" + nstr + "}");
});
const treeStore = useTreeStore();
const loading = ref(false);
const data = ref({
  cdrom: "",
  wifi: "",
  bluetooth: "",
  com: "",
  lpt: "",
});

watch(
  () => treeStore.treeDeviceId,
  () => {
    getConfig();
    watchFlag.value = false;
  }
);
onMounted(() => {
  getConfig();
});
const getConfig = async () => {
  if (!treeStore.treeDeviceId) return;
  loading.value = true;
  let params = Object.keys(data.value);
  try {
    const { data: res } = await req_getPeriphrealConfig(treeStore.treeDeviceId, params);
    loading.value = false;
    if (res.status && res.data.length) {
      const getValue = (key) => {
        let value;
        res.data.map((item) => {
          if (item[key]) {
            value = item[key];
          }
        });
        return value;
      };
      Object.keys(data.value).forEach((key) => {
        data.value[key] = getValue(key);
      });
      nextTick(() => {
        watchFlag.value = true;
      });
    } else {
      data.value = {
        cdrom: "",
        wifi: "",
        bluetooth: "",
        com: "",
        lpt: "",
      };
    }
  } catch (err) {
    loading.value = false;
  }
};
const saveConfig = _debounce((params) => {
  if (!treeStore.treeDeviceId) return;
  req_setPeriphreal(treeStore.treeDeviceId, params).then((res) => {
    res.data.succeed ? ElMessage.success("设置成功") : ElMessage.error("设置失败");
    watchFlag.value = false;
    getConfig();
  });
}, 500);
const watchFlag = ref(false);
const paramsData = computed(() => {
  let params = {};
  Object.keys(data.value).forEach((key) => {
    params[key] = data.value[key];
  });
  return params;
});
watch(
  paramsData,
  (val, oldVal) => {
    let params = [];
    for (var k in val) {
      if (val[k] !== oldVal[k]) {
        params.push({
          key: k,
          value: val[k],
        });
      }
    }
    if (watchFlag.value) {
      saveConfig(params);
    }
  },
  {
    deep: true, // 开启深度监听，可以监听数组、对象的变化
  }
);
</script>

<style lang="scss" scoped>
.protectionSet {
  margin-top: -16px;
  color: rgba(0,0,0,.65);
}
.outSet {
  display: flex;
  align-items: center;
  margin: 10px 65px;
}

.leftCont {
  margin-right: 20px;
  font-size: 16px;
}
:deep(.el-checkbox__label) {
  font-size: 16px;
}
.rightC {
  margin-left: 70px;
}
</style>
